<template>
  <a-modal
    :visible="visible"
    centered
    :title="$t('key.achievementsRecorded')"
    :okText="$t('button.submit')"
    :cancelText="$t('button.close')"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :width="1000"
    @cancel="() => { $emit('cancel') }"
    @ok="submitCheck"
    >
    <template slot="footer">
      <a-button type="primary" @click="showUnqualified" style="margin:0 15px">{{ showUnqualifiedBool? $t('button.showAll') : $t('button.showUnqualified') }}</a-button>
      <a-button @click="() => { $emit('cancel') }">{{ $t('button.close') }}</a-button>
      <a-button type="primary" :disabled="isEdit" @click="submitCheck(false)">{{ $t('button.save') }}</a-button>
      <a-button type="primary" :disabled="isEdit" @click="submitCheck(true)">{{ $t('button.submit') }}</a-button>
    </template>
    <p v-if="params.cjlx == '01'">
      成绩分布情况：
      90分以上：{{cjksxsmdList.length?parseInt(countA/cjksxsmdList.length*100):'0'}}%（{{countA}}/{{cjksxsmdList.length}}）          
      [80,90)分：{{cjksxsmdList.length?parseInt(countB/cjksxsmdList.length*100):'0'}}%（{{countB}}/{{cjksxsmdList.length}}）          
      [70-80)分：{{cjksxsmdList.length?parseInt(countC/cjksxsmdList.length*100):'0'}}%（{{countC}}/{{cjksxsmdList.length}}）          
      [60-70)分：{{cjksxsmdList.length?parseInt(countD/cjksxsmdList.length*100):'0'}}%（{{countD}}/{{cjksxsmdList.length}}）          
      60分以下：{{cjksxsmdList.length?parseInt(countE/cjksxsmdList.length*100):'0'}}%（{{countE}}/{{cjksxsmdList.length}}）
    </p>
    <p v-else>
      成绩分布情况：
      A：{{parseInt(countA/cjksxsmdList.length*100)}}%（{{countA}}/{{cjksxsmdList.length}}）
      B：{{parseInt(countB/cjksxsmdList.length*100)}}%（{{countB}}/{{cjksxsmdList.length}}）          
      C：{{parseInt(countC/cjksxsmdList.length*100)}}%（{{countC}}/{{cjksxsmdList.length}}）          
      D：{{parseInt(countD/cjksxsmdList.length*100)}}%（{{countD}}/{{cjksxsmdList.length}}）      
      E：{{parseInt(countE/cjksxsmdList.length*100)}}%（{{countE}}/{{cjksxsmdList.length}}）     
    </p>
    <a-table
      rowKey="xh"
      :columns="columns"
      :dataSource="showUnqualifiedBool ? UnqualifiedList : cjksxsmdList"
      :pagination="false"
      @change="handleChange"
      :scroll="{ y: 300 }">
      <a-input slot="xsxh" slot-scope="xs, record" v-model="record.xh"/>
      <template slot="kscj" slot-scope="xs, record">
        <a-input-number :min="0" :max="100" :disabled="isEdit || !!record.note" @change="kscjChange()" v-if="params.cjlx !== '02'" v-model="record.kscj"/>
        <a-select :disabled="isEdit  || !!record.note" v-else v-model="record.kscj" style="width: 100%" @change="kscjChange()">
          <a-select-option value="A">A</a-select-option>
          <a-select-option value="B">B</a-select-option>
          <a-select-option value="C">C</a-select-option>
          <a-select-option value="D">D</a-select-option>
          <a-select-option value="E">E</a-select-option>
        </a-select>
      </template>
      <template slot="xkzt" slot-scope="xs, record">
        <a-select :disabled="isEdit" :getPopupContainer="trigger => trigger.parentNode" style="width: 100%" v-model="record.xkzt">
          <a-select-option value="01">未修</a-select-option>
          <a-select-option value="02">在修</a-select-option>
          <a-select-option value="03">已修</a-select-option>
          <a-select-option value="04">重修</a-select-option>
          <a-select-option value="05">重修中</a-select-option>
          <a-select-option value="06">补考</a-select-option>
          <a-select-option value="07">缓考</a-select-option>
        </a-select>
      </template>
     <template slot="note" slot-scope="xs, record">
        <a-select :disabled="isEdit || record.kscj || record.kscj === 0" :getPopupContainer="trigger => trigger.parentNode" style="min-width: 100px" v-model="record.note" @change="$forceUpdate()">
          <a-select-option v-for="i in TYPE0519" :key="i.id" :value="i.name">{{ i.name }}</a-select-option>
        </a-select>
      </template>
      <a slot="action" slot-scope="xs, record, index" @click="deleteStu(index)">{{$t('button.delete')}}</a>
    </a-table>
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: ['visible', 'TYPE0519','modelForm'],
  data () {
    return {
      params: {},
      cjksxsmdList: [],
      confirmLoading: false,
      showCover: false,
      sortedInfo: null,
      selectedRowKeys: [],
      showUnqualifiedBool:false,
      UnqualifiedList:[],
      countA:0,
      countB:0,
      countC:0,
      countD:0,
      countE:0,
      isEdit:false,
      id:''
    }
  },
  watch:{
    visible(){
      this.UnqualifiedList = []
      this.showUnqualifiedBool = false
      if(!this.visible){
        this.isEdit = false
        this.id = ""
      }
      this.kscjChange()
    }
  },
  computed: {
    columns () {
      let { sortedInfo } = this
      sortedInfo = sortedInfo || {}
      return [
        {
          title: this.$t('key.xh'),
          width: '170px',
          dataIndex: 'xh',
          key: 'xh',
        },
        {
          title: this.$t('key.name'),
          width: '80px',
          dataIndex: 'xm'
        },
        {
          title: this.$t('key.ssyx'),
          width: '150px',
          dataIndex: 'ssyxmc'
        },
        {
          title: this.$t('key.sszy'),
          width: '150px',
          dataIndex: 'sszymc'
        },
        {
          title: this.$t('key.cj'),
          width: '100px',
          key: 'kscj',
          sorter: (a, b) => a.kscj - b.kscj,
          sortOrder: sortedInfo.columnKey === 'kscj' && sortedInfo.order,
          scopedSlots: { customRender: 'kscj' }
        },
        {
          title: this.$t('key.note'),
          width: '70px',
          scopedSlots: { customRender: 'note' }
        }
      ]
    },
  },
  methods: {
    kscjChange(){
      this.countA = 0
      this.countB = 0
      this.countC = 0
      this.countD = 0
      this.countE = 0

      if(this.params.cjlx != '02'){
        this.cjksxsmdList.map(item=>{
          if(item.kscj >= 90){
            this.countA ++ 
          }else if(90 > item.kscj && item.kscj >= 80){
            this.countB ++
          }else if(80 > item.kscj && item.kscj >= 70){
            this.countC ++
          }else if(70 > item.kscj && item.kscj >= 60){
            this.countD ++
          }else{
            this.countE ++
          }
        })
      }else{
        this.cjksxsmdList.map(item=>{
          if(item.kscj == 'A'){
            this.countA ++ 
          }else if(item.kscj == 'B'){
            this.countB ++
          }else if(item.kscj == 'C'){
            this.countC ++
          }else if(item.kscj == 'D'){
            this.countD ++
          }else{
            this.countE ++
          }
        })
      }
      
    },
    showUnqualified(){
      let params = {
        ...this.modelForm,
        list:this.cjksxsmdList
      }
      console.log(params)
      if(this.showUnqualifiedBool){
        this.UnqualifiedList.map(item=>{
          this.cjksxsmdList.map(i=>{
            if(item.xh == i.xh){
              i.kscj = item.kscj
              i.note = item.note
            }
          })
        })
        this.showUnqualifiedBool = !this.showUnqualifiedBool
      }else{
        this.$api.cultivate.bhgcjCheck(params).then(res => {
          console.log(res)
          this.showUnqualifiedBool = !this.showUnqualifiedBool
          this.UnqualifiedList = res.data
        }).finally(() => {
          
        })
      }
      
      // this.UnqualifiedList = []
      // this.showUnqualifiedBool = !this.showUnqualifiedBool

      // if( this.showUnqualifiedBool && this.params.cjlx != '02'){
      //   this.cjksxsmdList.map(item =>{
      //     if( item.kscj < 60 ){
      //       this.UnqualifiedList.push(item)
      //     }
      //   })
      // }else if(this.showUnqualifiedBool && this.params.cjlx == '02'){
      //   this.cjksxsmdList.map(item =>{
      //     if( item.kscj == 'A' || item.kscj == 'B' ){
      //       this.UnqualifiedList.push(item)
      //     }
      //   })
      // }
      
    },
    handleChange (pagination, filters, sorter) {
      // 将这三个参数赋值给Vue data，用于后续使用
      this.filteredInfo = filters;
      this.sortedInfo = sorter;
    },
    newRow () {
      this.cjksxsmdList.push({})
    },
    deleteStu (i) {
      this.cjksxsmdList.splice(i, 1)
    },
    submitCheck (bool) {
      const hasInvalidRow = this.cjksxsmdList.some(cj => {
        if (!String(cj.kscj) && !cj.note) {
          return true
        } else {
          return false
        }
      })
      if(this.showUnqualifiedBool){
        this.UnqualifiedList.map(item=>{
          this.cjksxsmdList.map(i=>{
            if(item.xh == i.xh){
              i.kscj = item.kscj
              i.note = item.note
            }
          })
        })
      }
      if (!hasInvalidRow || this.params.cjlx === '03') { // 03是免修，不需要成绩
        this.confirmLoading = true
        let params = Object.assign({}, this.params, {
          cjksxsmdList: this.cjksxsmdList.map(s => {
            return {...s, xsxh: s.xh, cjlxm: this.params.cjlx}
          })
        })
        params.sftj = bool
        if(this.id) params.id = this.id
        this.$api.cultivate.kccjDkcjlrAdd(params).then(res => {
          this.$message.success(bool ? '提交成功' : '保存成功')
          this.$emit('cancel')
          this.$emit('refresh')
        }).finally(() => {
          this.confirmLoading = false
        })
      } else {
        this.$message.warn('请输入完整的成绩，成绩为空时备注必填')
      }
    },
  }
}
</script>

<style scoped lang="less">
</style>
